import React, { Component } from 'react'
import { Transfer } from 'antd'
import { fetchData } from '../../../components/AjaxConsumer'


export default class TransferComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mockData: [],
            targetKeys: [],
        };
    }
    
    componentDidMount() {
        this.getData(this.props.initTabSelectList, this.props.initTabAllList);
    }
    componentWillReceiveProps(nextProps){
        // console.log('nextProps.selectLoginName------', nextProps.selectLoginName);
        // console.log('this.props.selectLoginName------', this.props.selectLoginName);
        if(nextProps.isComponentReset != this.props.isComponentReset && nextProps.isComponentReset != false){
            // console.log('我进入了刷新')
            this.getData(nextProps.initTabSelectList,nextProps.initTabAllList);
        }
    }
    getData = (otargetKeys,otempMockData) => {
        const omockData = [];
        const mockData = [];
        const targetKeys = [];
        //targetKeys - tempMockData = mockData
        otempMockData.map((a)=>{
            let c = otargetKeys.findIndex(b=>a == b);
            if (c > -1) delete otargetKeys[c];
            else omockData.push(a);
        });

        omockData.map((e,index)=>{
            const data = {
                key: e.key,
                title: e.value,
                description:e.value+index,
                chosen: false
            }
            mockData.push(data);
        })
        otargetKeys.map((e,index)=>{
            const data = {
                key: e.key,
                title: e.value,
                description:e.value+index,
                chosen: true
            }
            targetKeys.push(data.key);
            mockData.push(data);
        })
        this.setState({ mockData, targetKeys });
    }
    filterOption = (inputValue, option) => {
        return option.description.indexOf(inputValue) > -1;
    }
    handleChange = (targetKeys) => {
        this.setState({ targetKeys });
        this.props.getTransferSubmitData(this.props.tabCode,targetKeys);
    }

    render() {
        return(
             <div style={{marginLeft:'85px',marginTop:'20px'}}>
                 {/* <div>
                            未分配权限&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            已分配权限
                        </div>  */}
                <Transfer
                    listStyle={{
                        width: '300px',
                        height: '350px'
                    }}
                    dataSource={this.state.mockData}
                    showSearch
                    filterOption={this.filterOption}
                    targetKeys={this.state.targetKeys}
                    onChange={this.handleChange}
                    render={item => item.title}
                    titles={['未分配权限','已分配权限']}

                />
             </div>
        )
    }
}
